<template>
  <div class="home">
    <nav-bar :isUpper="false">
      <span slot="text">分类</span>
    </nav-bar>
    <!-- 左侧列表 -->
    <div class="container my-position">
      <div class="big_category">
        <ul>
          <li
            :class="{ active: currentIndex == index }"
            v-for="(item, index) in categoryList"
            :key="index"
            @click="roll(index)"
          >
            {{ item.name }}
          </li>
        </ul>
      </div>
      <!-- 右侧列表 -->
      <scroll ref="scrollRef" @scroll="scroll" :type="3">
        <div class="small_category">
          <ul ref="categoryRef">
            <li v-for="(item, index) in categoryList" :key="index">
              <p class="title">{{ item.name }}</p>
              <ul class="category">
                <li
                  v-for="(category, i) in item.rel_category"
                  :key="i"
                  @click="goto(category)"
                >
                  <!-- <img :src="imageUrl + category.img" alt="" /> -->
                  <!-- 测试图片 -->
                  <img src="@/assets/images/11.jpg" alt="" />
                  <p class="name">{{ category.name }}</p>
                  <p class="count">{{ category.count }}</p>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </scroll>
    </div>
    <main-tab-bar />
    <router-view />
  </div>
</template>

<script>
import Scroll from '@/components/common/scroll/Scroll';

import { getCategory } from '@/network/getData';
import { imageUrl } from '@/config/env';

export default {
  data() {
    return {
      imageUrl,
      categoryList: [], // 分类数据
      scrollY: 0, // 当前滚动坐标
      tops: [0] // 右侧分类的坐标
    };
  },
  computed: {
    currentIndex() {
      const index = this.tops.findIndex((item, index) => {
        return this.scrollY >= item && this.scrollY < this.tops[index + 1];
      });
      return index;
    }
  },
  async mounted() {
    const res = await getCategory();
    this.categoryList = res.data;
    this.$nextTick(() => {
      this.$refs.scrollRef.refresh();
      const list = this.$refs.categoryRef.children;
      let num = 0;
      list.forEach(item => {
        num += item.clientHeight;
        this.tops.push(num);
      });
    });
  },
  methods: {
    scroll(options) {
      this.scrollY = Math.abs(options.y);
    },
    roll(index) {
      const y = this.tops[index];
      this.$refs.scrollRef.scrollTo(0, -y);
    },
    goto(data) {
      this.$router.push({
        path: '/category/list',
        query: {
          id: data.id,
          name: data.name
        }
      });
    }
  },
  components: { Scroll }
};
</script>

<style lang="less" scoped>
.container {
  display: flex;
  width: 100%;
  overflow: hidden;
}
.my-position {
  bottom: 45px;
}
.big_category {
  min-width: 80px;
  max-width: 100px;
  height: 100%;
  margin-right: 10px;
  background-color: #fff;
  li {
    height: 35px;
    line-height: 35px;
    padding: 0 10px;
    font-size: var(--font-size);
    border-bottom: 1px solid #eee;
  }
  li.active {
    background-color: #f2f2f2;
  }
}

.small_category {
  .title {
    padding: 10px;
    font-size: var(--font-size);
    background-color: #f2f2f2;
  }
  .category {
    padding: 10px;
    background-color: #fff;
    p {
      font-size: var(--font-min);
    }
    li {
      display: inline-block;
      width: 33%;
      text-align: center;
      margin-bottom: 5px;
    }
  }

  img {
    width: 50px;
    height: 50px;
  }
}
</style>
